<template>
	<view class="top-fixed-nav-wrapper">
		<view class="fixed-nav-abr" :style="[{'height':`${CustomBar}px`, 'background': opacityVal}]">
			<view class="custom-bar" :style="customBarStyle">
				<view class="left-back sub-item" @click="goBack()">
					<view v-if="showBackBtn">
						<image :src="backUrl" mode="aspectFit" class="go-back" v-if="!isBlack"></image>
						<image :src="blackBackUrl" mode="aspectFit" class="go-back" v-else></image>
					</view>
				</view>
				<view class="center-title sub-item" :style="{'color': titleColor}">{{titleName}}</view>
				<view class="right-empty-seat sub-item"></view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
    data () {
		const StatusBar = uni.getStorageSync('StatusBar');
		const CustomBar	= uni.getStorageSync('CustomBar');
        return {
            StatusBar,
			CustomBar,
			backUrl: '../static/images/white-back.png',
			blackBackUrl: '../static/images/black-back.png',
        }
    },
    computed: {
        customBarStyle() {
            var StatusBar= this.StatusBar;
            var CustomBar= this.CustomBar;
            var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
            return style
        },
    },
	props: {
		showBackBtn: {
			type: Boolean,
			default: false,
		},
		isBlack: {
			type: Boolean,
			default: false,
		},
	    opacityVal: {
	        type: String,
	        default: 'transparent'
	    },
		titleName: {
			type: String,
			default: ''
		},
		titleColor: {
			type: String,
			default: '#000'
		}
	},
    created(){

    },
    mounted(){
        
    },
    methods: {
		goBack(){
			uni.navigateBack({
				delta: 1
			});
		},
    }
}
</script>

<style scoped lang="scss">
	.top-fixed-nav-wrapper{
		width: 100vw;
		.fixed-nav-abr{
			position: fixed;
			top: 0;
			z-index: 9;
			width: 100%;
			background: transparent;
			.custom-bar{
				width:100%;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				.sub-item{
					flex:1;
				}
				.left-back{
					.go-back{
						position: relative;
						left: 28upx;
						width: 20upx;
						height: 38upx;
						top: 7upx;
					}
				}
				.center-title{
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 34upx;
					letter-spacing: 2upx;
					font-weight: 600;
				}
				.right-empty-seat{
					
				}
			}
		}
	}	
</style>
